<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>File Sharing Web App</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
		<link href="https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&amp;display=swap" rel="stylesheet">
		
		<link rel="stylesheet" href="./fileShare.css"/>
	</head>
	<body>
		<link href="https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap" rel="stylesheet">
		<div class="app-container">
		  <div class="left-area">
		    <button class="btn-close-left">
		      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-x-circle" viewBox="0 0 24 24">
		        <defs/>
		        <circle cx="12" cy="12" r="10"/>
		        <path d="M15 9l-6 6M9 9l6 6"/>
		      </svg>
		    </button>
		    <div class="app-name">MyDocs</div>
		    <a href="#" class="item-link active" id="pageLink">
		      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-grid" viewBox="0 0 24 24">
		        <defs />
		        <path d="M3 3h7v7H3zM14 3h7v7h-7zM14 14h7v7h-7zM3 14h7v7H3z" />
		      </svg>
		    </a>
		    <a href="#" class="item-link" id="pageLink">
		      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-folder" viewBox="0 0 24 24">
		        <defs />
		        <path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z" />
		      </svg>
		    </a>
		    <a href="#" class="item-link" id="pageLink">
		      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-hard-drive" viewBox="0 0 24 24">
		        <defs />
		        <path d="M22 12H2M5.45 5.11L2 12v6a2 2 0 002 2h16a2 2 0 002-2v-6l-3.45-6.89A2 2 0 0016.76 4H7.24a2 2 0 00-1.79 1.11zM6 16h.01M10 16h.01" />
		      </svg>
		    </a>
		    <a href="#" class="item-link" id="pageLink">
		      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-settings" viewBox="0 0 24 24">
		        <defs />
		        <circle cx="12" cy="12" r="3" />
		        <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" />
		      </svg>
		    </a>
		    <button class="btn-logout">
		      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-log-out" viewBox="0 0 24 24">
		        <defs/>
		        <path d="M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4M16 17l5-5-5-5M21 12H9"/>
		      </svg>
		    </button>
		  </div>
		  <div class="main-area">
		    <button class="btn-show-right-area">
		      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-left"><polyline points="15 18 9 12 15 6"/></svg>
		    </button>
		    <button class="btn-show-left-area">
		      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
		    </button>
		    <div class="main-area-header">
		      <div class="search-wrapper" id="searchLine">
		      <input class="search-input" type="text" placeholder="e.g. files.doc">
		      <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-search" viewBox="0 0 24 24">
		        <defs/>
		        <circle cx="11" cy="11" r="8"/>
		        <path d="M21 21l-4.35-4.35"/>
		      </svg>
		    </div>
		    </div>
		    <section class="content-section">
		      <h1 class="section-header">Quick Access</h1>
		      <div class="access-links">
		        <div class="access-link-wrapper">
		          <div class="access-icon">
		            <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-image">
		              <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
		              <circle cx="8.5" cy="8.5" r="1.5"/>
		              <polyline points="21 15 16 10 5 21"/>
		            </svg>
		          </div>
		          <span class="access-text">Images</span>
		        </div>
		        <div class="access-link-wrapper">
		          <div class="access-icon">
		            <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-music">
		              <path d="M9 18V5l12-2v13"/>
		              <circle cx="6" cy="18" r="3"/>                   <circle cx="18" cy="16" r="3"/>
		            </svg>
		          </div>
		          <span class="access-text">Music</span>
		        </div>
		        <div class="access-link-wrapper">
		          <div class="access-icon">
		            <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="currentColor" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-play">
		              <polygon points="5 3 19 12 5 21 5 3"/>
		            </svg>
		          </div>
		          <span class="access-text">Video</span>
		        </div>
		        <div class="access-link-wrapper">
		          <div class="access-icon">
		            <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-left">
		              <line x1="17" y1="10" x2="3" y2="10"/>
		              <line x1="21" y1="6" x2="3" y2="6"/>
		              <line x1="21" y1="14" x2="3" y2="14"/>
		              <line x1="17" y1="18" x2="3" y2="18"/>
		            </svg>
		          </div>
		          <span class="access-text">Docs</span>
		        </div>
		        <div class="access-link-wrapper">
		          <div class="access-icon">
		            <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-layers">
		              <polygon points="12 2 2 7 12 12 22 7 12 2"/>
		              <polyline points="2 17 12 22 22 17"/>
		              <polyline points="2 12 12 17 22 12"/>
		            </svg>
		          </div>
		          <span class="access-text">Apps</span>
		        </div>
		        <div class="access-link-wrapper">
		          <div class="access-icon">
		            <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-down-circle">
		              <circle cx="12" cy="12" r="10"/>
		              <polyline points="8 12 12 16 16 12"/>
		              <line x1="12" y1="8" x2="12" y2="16"/>
		            </svg>
		          </div>
		          <span class="access-text">Download</span>
		        </div>
		      </div>
		    </section>
		    <section class="content-section">
		       <div class="section-header-wrapper">
		         <h1 class="section-header">Preview</h1>
		         <a class="section-header-link">
		           View in folders
		         </a>
		       </div>
		      <div class="content-section-line">
		        <div class="section-part left">
		          <a class="image-wrapper">
		            <div class="image-overlay">
		              <div class="video-info">
		                <div class="video-info-text">
		                  <p class="video-name medium">Happiness & Tears</p>
		                  <p class="video-subtext medium">45.5 MB</p>
		                </div>
		                <button class="btn-play"></button>
		            </div>
		            </div>
		            <img src="https://images.unsplash.com/photo-1492691527719-9d1e07e534b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2251&q=80"/>
		            <span class="video-time">10:32</span>
		          </a>
		        </div>
		        <div class="section-part right">
		          <div class="content-part-line">
		            <a class="image-wrapper">
		              <div class="image-overlay">
		              <div class="video-info">
		              <div class="video-info-text">
		                <p class="video-name tiny">High Hopes</p>
		                <p class="video-subtext tiny">50 MB</p>
		              </div>
		            </div>
		            </div>
		            <img src="https://images.unsplash.com/photo-1515552726023-7125c8d07fb3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2167&q=80"/>
		              <span class="video-time">02:35</span>
		          </a>
		            <a class="image-wrapper">
		              <div class="image-overlay">
		              <div class="video-info">
		              <div class="video-info-text">
		                <p class="video-name tiny">Imaginery you</p>
		                <p class="video-subtext tiny">210.2 MB</p>
		              </div>
		            </div>
		            </div>
		              <img src="https://images.unsplash.com/photo-1542359649-31e03cd4d909?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2167&q=80"/>
		              <span class="video-time">04:15</span>
		            </a>
		          </div>
		        </div>
		      </div>
		    </section>
		    <section class="content-section">
		      <div class="section-header-wrapper">
		        <h1 class="section-header">Recent Files</h1>
		        <a class="section-header-link">
		          View all files
		        </a>
		      </div>
		      <div class="files-table">
		        <div class="files-table-header">
		          <div class="column-header table-cell">Name</div>
		          <div class="column-header table-cell size-cell">Size</div>
		          <div class="column-header table-cell">Last Modified</div>
		          <div class="column-header table-cell">Action</div>
		        </div>
		        <div class="files-table-row">
		          <div class="table-cell name-cell pdf">Brandenburg.pdf</div>
		          <div class="table-cell">42 MB</div>
		          <div class="table-cell">Aug 26, 2020</div>
		          <div class="table-cell action-cell">
		            <button class="more-action"></button>
		          </div>
		        </div>
		        <div class="files-table-row">
		          <div class="table-cell name-cell jpg">TheLionsRoar.jpg</div>
		          <div class="table-cell size-cell">500 KB</div>
		          <div class="table-cell">Aug 26, 2020</div>
		          <div class="table-cell action-cell">
		            <button class="more-action"></button>
		          </div>
		        </div>
		      </div>
		    </section>
		  </div>
		  <div class="right-area">
		    <button class="btn-close-right">
		      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-x-circle" viewBox="0 0 24 24">
		        <defs/>
		        <circle cx="12" cy="12" r="10"/>
		        <path d="M15 9l-6 6M9 9l6 6"/>
		      </svg>
		    </button>
		    <div class="right-area-header-wrapper">
		      <p class="right-area-header">Downloads</p>
		      <button class="more-action"></button>
		    </div>
		    <div class="download-item-line">
		      <div class="line-header">Today</div>
		      <div class="download-area">
		        <div class="download-item-icon">
		          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="">
		            <defs></defs>
		            <circle cx="256" cy="256" r="256" fill="#4b50dd"></circle>
		            <path fill="#f5f5f5" d="M192 64h176c4.4 0 8 3.6 8 8v328c0 4.4-3.6 8-8 8H120c-4.4 0-8-3.6-8-8V148l80-84z"></path>
		            <path fill="#e6e6e6" d="M184 148c4.4 0 8-3.6 8-8V64l-80 84h72z"></path>
		            <circle cx="352" cy="384" r="52" fill="#2179a6"></circle>
		            <g fill="#f5f5f5" class="g">
		              <path d="M352 416c-2.208 0-4-1.788-4-4v-56c0-2.212 1.792-4 4-4s4 1.788 4 4v56c0 2.212-1.792 4-4 4z"></path>
		              <path d="M352 416a3.989 3.989 0 01-2.828-1.172l-20-20c-1.564-1.564-1.564-4.092 0-5.656s4.092-1.564 5.656 0L352 406.344l17.172-17.172c1.564-1.564 4.092-1.564 5.656 0s1.564 4.092 0 5.656l-20 20A3.989 3.989 0 01352 416z"></path>
		            </g>
		          </svg>
		        </div>
		        <div class="download-item-texts">
		          <p class="download-text-header">Glitter.mp4</p>
		          <p class="download-text-info">34.45 MB<span>Waiting for download</span></p>
		        </div>
		        <div class="download-icon">
		          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612">
		            <defs/>
		            <path d="M403.939 295.749l-78.814 78.833V172.125c0-10.557-8.568-19.125-19.125-19.125s-19.125 8.568-19.125 19.125v202.457l-78.814-78.814c-7.478-7.478-19.584-7.478-27.043 0-7.478 7.478-7.478 19.584 0 27.042L289.208 431c4.59 4.59 10.863 6.005 16.812 4.953 5.929 1.052 12.221-.382 16.811-4.953l108.19-108.19c7.478-7.478 7.478-19.583 0-27.042-7.498-7.478-19.604-7.478-27.082-.019zM306 0C137.012 0 0 136.992 0 306s137.012 306 306 306 306-137.012 306-306S475.008 0 306 0zm0 573.75C158.125 573.75 38.25 453.875 38.25 306S158.125 38.25 306 38.25 573.75 158.125 573.75 306 453.875 573.75 306 573.75z"/>
		          </svg>
		        </div>
		      </div>
		    </div>
		    <div class="download-item-line">
		      <div class="line-header">Yesterday</div>
		      <div class="download-area">
		        <div class="download-item-icon">
		          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="">
		            <defs></defs>
		            <circle cx="256" cy="256" r="256" fill="#4bc0dd"></circle>
		            <path fill="#f5f5f5" d="M192 64h176c4.4 0 8 3.6 8 8v328c0 4.4-3.6 8-8 8H120c-4.4 0-8-3.6-8-8V148l80-84z"></path>
		            <path fill="#e6e6e6" d="M184 148c4.4 0 8-3.6 8-8V64l-80 84h72z"></path>
		            <circle cx="352" cy="384" r="52" fill="#2179a6"></circle>
		            <g fill="#f5f5f5" class="g">
		              <path d="M352 416c-2.208 0-4-1.788-4-4v-56c0-2.212 1.792-4 4-4s4 1.788 4 4v56c0 2.212-1.792 4-4 4z"></path>
		              <path d="M352 416a3.989 3.989 0 01-2.828-1.172l-20-20c-1.564-1.564-1.564-4.092 0-5.656s4.092-1.564 5.656 0L352 406.344l17.172-17.172c1.564-1.564 4.092-1.564 5.656 0s1.564 4.092 0 5.656l-20 20A3.989 3.989 0 01352 416z"></path>
		            </g>
		          </svg>
		        </div>
		        <div class="download-item-texts">
		          <p class="download-text-header">Glitter.mp4</p>
		          <div class="progress-bar">
		            <span class="progress"></span>
		          </div>
		        </div>
		        <div class="download-icon">
		          <svg xmlns="http://www.w3.org/2000/svg" viewBox="1 1 512 512">
		            <defs/>
		            <path d="M256 512C114.613 512 0 397.383 0 256S114.613 0 256 0s256 114.613 256 256c-.168 141.316-114.684 255.832-256 256zm0-480C132.29 32 32 132.29 32 256s100.29 224 224 224 224-100.29 224-224c-.133-123.656-100.344-223.867-224-224zm0 0"/>
		            <path d="M208 368c-8.836 0-16-7.164-16-16V160c0-8.836 7.164-16 16-16s16 7.164 16 16v192c0 8.836-7.164 16-16 16zm0 0M304 368c-8.836 0-16-7.164-16-16V160c0-8.836 7.164-16 16-16s16 7.164 16 16v192c0 8.836-7.164 16-16 16zm0 0"/>
		          </svg>
		        </div>
		      </div>
		    </div>
		    <div class="right-area-header-wrapper">
		      <p class="right-area-header">File Received</p>
		    </div>
		    <div class="received-item-line">
		      <div class="progress-line">
		        <span class="time start">15:30</span>
		        <span class="time end">18:30</span>
		      </div>
		      <div class="received-items-content">
		        <div class="received-files">
		          <div class="image-wrapper">
		          <img src="https://images.unsplash.com/photo-1523987355523-c7b5b0dd90a7?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80"/>
		        </div>
		        <div class="image-wrapper">
		          <img src="https://images.unsplash.com/photo-1498855926480-d98e83099315?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"/>
		        </div>
		        <div class="image-wrapper">
		          <img src="https://images.unsplash.com/photo-1492648272180-61e45a8d98a7?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80"/>
		        </div>
		        </div>
		        <div class="received-files-info">
		          Received <span class="info-purple">3 images</span> total  <span class="info-purple">50.3 MB</span>
		        </div>
		      </div>
		    </div>
		  </div>
		</div>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script src="./fileShare.js"></script>
	</body>
</html>